<template>
  <div class="screen-container">
    <div id="trend">
      <TrendTop></TrendTop>
    </div>
    <div id="seller">
      <Seller></Seller>
    </div>
    <div id="map">
      <Map></Map>
    </div>
    <div id="left_trend">
      <TrendLeft></TrendLeft>
    </div>
    <div id="right_trend">
      <TrendRight></TrendRight>
    </div>
    <div id="right_hot">
      <HotRight></HotRight>
    </div>
  </div>
</template> 
<script>
import TrendTop from '@/components/charts/TrendTop.vue'
import Seller from '@/components/charts/Seller'
import Map from '@/components/charts/Map.vue'
import TrendLeft from '@/components/charts/TrendLeft.vue'
import TrendRight from '@/components/charts/TrendRight.vue'
import HotRight from '@/components/charts/HotRight.vue'
export default {
  data() {
    return {}
  },
  mounted() {},
  components: {
    TrendTop, Seller, Map, TrendLeft, TrendRight, HotRight
  }
}
</script>
<style lang="scss">
.screen-container {
  width: 100%;
  padding: 20px;

  #trend {
    width: 70%;
    height: 600px;
  }

  #seller {
    width: 70%;
    height: 600px;
  }

  #map {
    width: 70%;
    height: 700px;
  }

  #left_trend {
    width: 70%;
    height: 600px;
    float: left;
  }

  #right_trend,#right_hot {
    width: 50%;
    height: 600px;
    float: left;
  }

  // #right_hot {
  //   width: 70%;
  //   height: 600px;
  //   float: left;

  // }
}
</style>
